<template>
  <div class="rightSideStage">
    <!-- 添加 -->
    <div class="add">
      <el-button
        size="small"
        @click="addDialogVisible = true"
        class="el-button"
        type="primary"
        >添加</el-button
      >
    </div>
    <!-- 数据列表 -->
    <div class="dataList">
      <!-- 标题 -->
      <!-- <div class="title"><i class="el-icon-warning"></i>数据列表</div> -->
      <!-- 数据区域 -->
      <div class="dataArea">
        <el-table :data="tableData" border style="width: 100%" height="100%">
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column prop="companyName" label="公司名称">
          </el-table-column>
          <el-table-column prop="itemIntroduction" label="招标公告">
          </el-table-column>
          <el-table-column label="营业执照" width="100">
             <template slot-scope="scope">
                                      <el-image
                class="tableImg"
                fit="contain"
                :src="scope.row.licensePictureUrl"
              >
                                        </el-image
              >
                                  </template
            >
          </el-table-column>
          <el-table-column prop="phone" label="联系电话"> </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="showEdit(scope.row.id)"
                type="text"
                size="small"
                >编辑</el-button
              >
              <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="labelPage">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalNumber">
                </el-pagination>
            </div> -->
    </div>
    <!-- 添加弹出框 -->
    <el-dialog
      title="添加"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClose"
    >
      <!-- 招标公告 -->
      <el-form
        style="display: flex; justify-content: space-between"
        :model="addForm"
        label-width="80px"
        ref="addFormRef"
      >
        <el-row>
          <el-col :span="16">
            <!-- 招标公告 -->
            <span class="spanRed">*</span>
            <el-form-item
              size="mini"
              class="qualificationWidth"
              label="招标公告"
            >
              <el-select
                v-model="addForm.itemIntroduction"
                placeholder="请选择招标公告"
              >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <!-- 公司名称 -->
            <span class="spanRed">*</span>
            <el-form-item
              size="mini"
              class="qualificationWidth"
              label="公司名称"
            >
              <el-input v-model="addForm.companyName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <!-- 联系电话 -->
            <span class="spanRed">*</span>
            <el-form-item
              size="mini"
              class="qualificationWidth"
              label-width="80px"
              label="联系电话"
            >
              <el-input v-model="addForm.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <!-- 营业执照 -->
            <span class="spanRed">*</span>
            <el-form-item label="营业执照">
                            <!-- <el-upload
                :action="uploadLicPicURL"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
                :headers="headerObj"
                :on-preview="handlePreview"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload> -->

            </el-form-item>
          </el-col>
          <el-col :span="16">
            <!-- 标书上传 -->
            <span class="spanRed">*</span>
            <el-form-item label="标书上传">
        <div>
              <el-upload
      action=""
      :on-success="saveFile"
      :http-request="Upload"
      :on-remove="delitem"
      list-type="picture-card" class="upload-demo">
      <i class="el-icon-plus"></i>
    </el-upload>
        </div>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <!-- 公司资质上传 -->
            <span class="spanQualification">*</span>
            <el-form-item
              style="display: flex; flex-direction: column"
              label="公司资质上传(不限数量)"
            >
              <div class="pictureScroll">
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑弹出框 -->
    <el-dialog
      title="编辑"
      :visible.sync="editDialogVisible"
      width="40%"
      @close="editDialogClose"
    >
      <el-form ref="form" :model="editform" label-width="80px">
        <el-form-item label="公司名称">
          <!-- <el-input size="mini" v-model="editform.name" :placeholder="scope.name"></el-input> -->
          <el-input size="mini" v-model="editform.name"></el-input>
        </el-form-item>

        <el-form-item label="招标公告">
          <!-- <el-input size="mini" v-model="editform.tenderAnnouncement" :placeholder="scope.tenderAnnouncement"></el-input> -->
          <el-input
            size="mini"
            v-model="editform.tenderAnnouncement"
          ></el-input>
        </el-form-item>

        <el-form-item label="营业执照">
          <!-- <el-input v-model="form.city" :placeholder="scope.city"></el-input> -->
          <el-upload
            size="mini"
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="联系电话">
          <!-- <el-input size="mini" v-model="editform.phone" :placeholder="scope.phone"></el-input> -->
          <el-input size="mini" v-model="editform.phone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 图片预览 -->
    <el-dialog title="提示" :visible.sync="preViewDialogVisible" width="50%">
      <img :src="previewPath" class="previewImg" />
    </el-dialog>
  </div>
</template>

<script>
import client from '../../../api/ossClient'
export default {
  data() {
    return {
      tableData: [],
      addForm: {
        // 招标公告
        itemIntroduction: "",
        // 公司名
        companyName: "",
        // 联系电话
        phone: "",
        // // 营业执照
        // licensePictureUrl: "",
        // 公司资质
        pictureUrl: "",
      },
      editform: {
        name: "",
        tenderAnnouncement: "",
        city: "",
        phone: "",
      },
      url:[],
      uploadLicPicURL: "http://192.168.31.93:9453/api/admin/apply/lot/business",
      headerObj: {
        token: window.sessionStorage.getItem('token'),
        "Content-Type": "application/x-www-form-urlencoded",
      },
      headerFile:{
        "Content-Type": "multipart/form-data",
      },
      // 预览地址
      previewPath: "",
      preViewDialogVisible: false,
      // 控制添加用户对话框的显示与隐藏
      addDialogVisible: false,
      editDialogVisible: false,
      dialogVisible: false,
      imageUrl: false,
      dialogImageUrl: false,
       images: [],
       fileSave:{
       itemAddr:"",
       itemId:'1',
       type:'0'
}
    };
  },
  methods: {
    async list() {
      const { data: res } = await this.$http.post("/api/admin/apply/select");

      if (res.code !== 200) {
        return this.$message.error("获取列表失败！");
      }

      this.$message.success("获取列表成功！");
      console.log(res);
      this.tableData = res.data;
    },
    addDialogClose() {
      this.$refs.addFormRef.resetFields();
    },
    // 上传图片
    handleAvatarSuccess(response) {
      console.log(response);
      // 1.拼接得到一个图片信息对象
      // const picInfo = { pic: response.data.tmp_path }
      // 2.将图片信息对象，  push 到 pics数组中
      // this.addForm.pictureUrl.push(picInfo)
      console.log(this.addForm);
    },
    handleRemove(file) {
      console.log(file);
      // 1.获取将要删除的图片的临时路径
      const filePath = file.response.data.tmp_path;
      // 2.从pics数组中，找到这个图片对应的索引值
      const i = this.addForm.pictureUrl.findIndex((x) => x.pic === filePath);
      // 3.调用数组的splice方法，吧图片信息对象，从pics数组中移除
      this.addForm.pictureUrl.splice(i, 1);
      console.log(this.addForm);
    },
    handlePreview(file) {
      console.log(file);
      this.previewPath = file.response.data.url;
      this.preViewDialogVisible = true;
    },
        Upload(file) {
        //判断扩展名
          const tmpcnt = file.file.name.lastIndexOf(".")
          const exname = file.file.name.substring(tmpcnt + 1)
          const names = ['jpg', 'jpeg', 'webp', 'png','bmp', 'docx','doc']
          if(names.indexOf(exname)< 0 ){
            this.$message.error("不支持的格式!")
            return
          }
        const fileName =file.file.uid + '.' + exname
        client.put(fileName, file.file).then(res=>{
          if(res.url){
            this.url.push(res.url)
            
            console.log('aaaaa',this.url)
            this.saveFile()
          }else{
            this.$message.error('文件上传失败')
          }
        }).catch(err=>{})
      },
      //删除一个图片..
        delitem(file, fileList){
          console.log(file.uid)
          for (let i = 0; i < this.url.length; i++) {
            if(this.url[i].indexOf(file.uid) > -1){
              this.url.splice(i, 1);
            }
          }
        },
         saveFile(){
           this.fileSave.itemAddr = this.url
          this.$http.post('/api/app/saveFile',this.fileSave,);
          
      console.log('351')
      console.log(this.fileSave.itemAddr);
        },
    // 上传文件
    // handleAvatarSuccessFile(response) {
    //   console.log(response);

    // },
    // handleRemoveFile(file) {
    //   console.log(file);

    // },
    // handlePreviewFile(file) {
    //   console.log(file);

    // },
            getOssToken(){
            
            this.$http.get('/api/app/ossUpload/AppOssUpload').then(function(res){
                if(res.code == 200){
                    this.aliyunOssToken = res.data;
                }else{
                    this.$message.error(res.data.message);
                }
            }).catch(function(error){
                console.log(error);
            })
        },
    // 弹窗确定事件
    add() {
      this.$refs.addFormRef.validate(async (valid) => {
        console.log(valid);
        if (!valid) return;
        // 可以发起网络请求
        const { data: res } = await this.$http.post(
          "/api/admin/apply/lot/save",
          this.addForm
        );
        if (res.code !== 200) {
          this.$message.error("添加用户失败");
        }
        this.$message.success("添加用户成功");
        console.log(res);
        // 隐藏对话框
        this.addDialogVisible = false;
        // 重新获取用户列表数据
        this.list();
      });
    },
    showEdit() {
      this.editDialogVisible = true;
    },
    editDialogClose() {
      this.editDialogVisible = false;
    },
    handlePictureCardPreview() {},
    handleRemove() {},
  },
  created() {
    this.list();
    this.getOssToken();
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.rightSideStage {
  width: calc(100% - 240px);
  height: calc(100% - 10px);
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  .add {
    width: calc(100% - 20px);
    height: 50px;
    background: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 20px;
    position: relative;
    top: 20px;
    .el-button {
      width: 100px;
    }
  }
  .dataList {
    width: 100%;
    height: calc(100% - 70px);
    background: #ffffff;
    position: relative;
    top: 20px;
    box-shadow: 0 0 3px #c1c0c0;
    // .title{
    //     width: calc(100% - 20px);
    //     height: 50px;
    //     background: rgb(184, 184, 184);
    //     display: flex;
    //     align-items: center;
    //     padding-left: 20px;
    // }
    .dataArea {
      width: calc(100% - 40px);
      height: calc(100% - 60px);
      transform: translate(20px, 20px);
      // border: 1px solid #c1c0c0;
    }
    .labelPage {
      width: calc(100% - 40px);
      height: 40px;
      position: relative;
      top: 20px;
      transform: translate(20px, 0px);
      font-weight: 100;
    }
  }
}

.businessLicenseImg {
  width: 50px;
  height: 50px;
}
.addTendder {
  width: 600px;
  height: auto;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .tenderAnnouncement {
    width: calc(100% - 50px);
    height: auto;
    display: flex;
    justify-content: start;
    padding-left: 50px;
    position: relative;
    top: 10px;
  }
}

.addTendder::-webkit-scrollbar {
  width: 0;
}

.spanRed {
  position: relative;
  left: 10px;
  top: 5px;
  color: red;
}

.spanQualification {
  color: red;
  position: relative;
  left: 10px;
  top: 25px;
}

.qualificationWidth {
  width: 260px;
}

.margin {
  width: 370px;
}

.uploadFile {
  width: 80px;
  height: 30px;
  cursor: pointer;
}

.tenderUpload {
  width: 80px;
  height: 30px;
  position: relative;
  left: -80px;
  top: -2px;
  opacity: 0;
}

.addTender {
  width: calc(100% - 20px);
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  // font-weight: bold;
  font-size: 20px;
  background: #409eff;
  color: #ffffff;
}

.el-upload-list__item-thumbnail {
  width: 100px;
  height: 100px;
}

.pictureScroll {
  width: 515px;
  height: 160px;
  overflow-y: scroll;
  position: relative;
  left: -160px;
}

.confirmationDialogBox {
  width: 300px;
  height: 150px;
  background: #ffffff;
  .uploadedSuccessfully {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cancelConfirm {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/deep/ .el-table .cell,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
  text-align: center;
}
</style>

